import React from 'react';
import { Popover, Button } from 'antd';
import { RightOutlined } from '@ant-design/icons'
import ActionIcon from '../ActionIcon'
import style from './index.module.css'
import jlyq from '@/assets/images/jlyq.png'

const ActionBtnGroup = () => {
  const content = (
    <div className={style.actionBox}>
      <div className={style.actionBox_content}>
        {/* 头部 */}
        <header className={style.actionBox_header}>
          <div className={style.actionBox_title}>巨量引擎产品矩阵</div>
          <Button type='link'>查看更多<RightOutlined style={{ fontSize: '12px' }} /></Button>
        </header>
        {/* 内容 */}
        <div className={style.actionBox_body}>
          <div className={style.actionBox_body_item}>
            <div>
              <img src={jlyq} alt="巨量引擎官网" />
            </div>
            <div>巨量引擎官网</div>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <Popover content={content} placement="bottomRight">
      <ActionIcon style={{ fontSize: '22px' }} />
    </Popover>
  );
};

export default ActionBtnGroup;